$(function () {
    init();
})

function init() {
    FastClick.attach(document.body);
    indexIsNot();
}

function indexIsNot() {
    equipmemtService.indexIsNot({}, function (data) {
        if (data.success) {
            var serverData = data.datas;
            var groupTitle={
                type:null,
            },group;
            for(var i=0;i<serverData.length;i++){
                var item=serverData[i];
                if(groupTitle.type==null||groupTitle.type!=item.typeCode){
                    groupTitle.type=item.typeCode;
                    $("#nav #a"+item.typeCode).show();
                    groupTitle.dom=$("<div class=\"tabBox\" id=\""+item.typeCode+"\">" +
                        "        <div class=\"tabButtons\">" +
                        "            <div class=\"tabButton active TA\">"+item.name+"</div>" +
                        "        </div>" +
                        "        <div class=\"tabBar TA\"></div>" +
                        "    </div>");
                    group=$(" <div class=\"group\"></div>");
                    $("#background").append(groupTitle.dom).append(group);
                }
                var row;
                if(item.indexState=='204001'){
                    row= $(' <div class="productPic lazyLoad_img" id="'+item.code+'" data-src="'+item.picture1+'" >' +
                        '            <div class="productInfo">' +
                        '                <span>'+item.describe+'</span>' +
                        '            </div>' +
                        '        </div>');
                    row.on("click",function (e) {
                        var t=$(e.target);
                        if(!t.hasClass("productPic")){
                            t=t.parents(".productPic")
                        }
                        window.location.href="/pdetail/"+t[0].id;
                    })
                    group.append(row);
                }else{
                     row = $(' <div class="product" id="'+item.code+'">' +
                        '            <div class="pic lazyLoad_img" data-src="'+item.picture1+'""></div>' +
                        '            <div class="info">' +
                        '                <span>'+item.describe+'</span>' +
                        '            </div>' +
                        '        </div>');
                    row.on("click",function (e) {
                        var t=$(e.target);
                        if(!t.hasClass("product")){
                            t=t.parents(".product")
                        }
                        window.location.href="/pdetail/"+t[0].id;
                    })
                    group.append(row);
                }
            }
            loadImgFun();
        } else {
            $.alert(data.errorMsg);
        }
    })
}
function loadImgFun(){
    let [imgList,delay,time] = [[],null,200];
    //滚动执行的入口函数
    var  throttleLoad = ()=>{
        clearTimeout(delay);
        //函数节流:避免高频事件导致浏览器掉帧，优化加载性能，提升用户体验，降低服务器压力（存在请求的情况下）
        delay = setTimeout(()=>{
            loadImg();
        },time)
    }
    //判断图片是否显示在可视区域
    var isShow = (element)=>{
        //getBoundingClientRect()用于获取元素相对于视口的位置，用top,right,bottom,left表示，元素的这个四个属性都是相对于视口的left和top来说的。
        let base = element.getBoundingClientRect();
        if( window.innerWidth-base.left>=base.width&&window.innerHeight-base.top>=10){
            return true;
        }else{
            return false;
        }
        // return (base.left && base.left >=0 && base.top && base.top >= 0) <= (document.clientHeight || window.innerHeight);
    }
    //加载图片
    var loadImg = ()=>{
        for(let i = 0;i<imgList.length;i++){
            if(isShow(imgList[i])){
                //使用getAttribute()也可以
                imgList[i].setAttribute("style","background-image: url("+imgList[i].dataset.src+")") ;
                console.info("load:"+imgList[i].dataset.src);
                //删除已经加载的图片元素，避免重复查询，提高性能
                imgList.splice(i,1);
                i--;
            }
        }
    }

    var init = (selector)=>{
        selector = selector || '.lazyLoad_img';
        let nodes = document.querySelectorAll(selector);
        //将nodeList转换成数据类型array
        imgList = Array.apply(null,nodes);
        $("#background")[0].addEventListener('scroll',throttleLoad,false);
        loadImg();
    }
    init('.lazyLoad_img');
}